<template>
  <div class="buy-mode__pay'">
    <ul>
      <!-- 如果在微信小程序 -->
      <template v-if="payConfig.wxConfigStatus">
        <li
          v-if="isXcx()"
          :class="['buy-mode__pay--item', { active: activePay === PayMode.WX_NATIVE }]"
          @click="changePayType(PayMode.WX_MINI)"
        >
          <p>
            <img class="pay-icon" :src="PayWX" alt="" />
            微信支付 小程序
          </p>
          <p>
            <img class="select-icon" :src="isSelectIcon(PayMode.WX_MINI)" alt="" />
          </p>
        </li>

        <!-- 微信内 不在小程序环境 并且不在支付宝 展示 -->
        <template v-if="!isXcx() && !os?.isAlipay">
          <li
            v-if="isWeChatEnv"
            :class="['buy-mode__pay--item', { active: activePay === PayMode.WX_JSAPI }]"
            @click="changePayType(PayMode.WX_JSAPI)"
          >
            <p>
              <img class="pay-icon" :src="PayWX" alt="" />
              微信支付 公之号
            </p>
            <p>
              <img class="select-icon" :src="isSelectIcon(PayMode.WX_JSAPI)" alt="" />
            </p>
          </li>

          <li
            v-else
            :class="['buy-mode__pay--item', { active: activePay === PayMode.WX_H5 }]"
            @click="changePayType(PayMode.WX_H5)"
          >
            <p>
              <img class="pay-icon" :src="PayWX" alt="" />
              微信支付 h5
            </p>
            <p>
              <img class="select-icon" :src="isSelectIcon(PayMode.WX_H5)" alt="" />
            </p>
          </li>
        </template>
      </template>

      <li
        v-if="!isWeChatEnv && payConfig.alipayConfigStatus"
        :class="['buy-mode__pay--item', { active: activePay === PayMode.ALI_MOBILE }]"
        @click="changePayType(PayMode.ALI_MOBILE)"
      >
        <p>
          <img class="pay-icon" :src="PayZFB" alt="" />

          支付宝支付
        </p>
        <p>
          <img class="select-icon" :src="isSelectIcon(PayMode.ALI_MOBILE)" alt="" />
        </p>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// icon
import PayUnselected from '@/assets/images/cashier/pay-unselected.png'
import PaySelected from '@/assets/images/cashier/pay-selected.png'
import PayWX from '@/assets/images/cashier/pay-wx.png'
import PayZFB from '@/assets/images/cashier/pay-zfb.png'

import { isWeChat, isXcx } from '@kukefe/kkutils'

import { PayMode } from '../../../shared/enums'

import { os } from '../../../shared/utils'

import { getIsSettingPay } from '../../../shared/apis'
import type { PaymentTypeResult } from '../../../shared/types'

const route = useRoute()
interface Props {
  payTypeId?: number
}

const props = withDefaults(defineProps<Props>(), {
  payTypeId: PayMode.WX_H5
})

// 根据产品线id获取租户配置支付信息
const emits = defineEmits<{
  (e: 'change', value: number): void
  (e: 'updateConfig'): void
}>()

const { appId } = route.query as Record<string, string | any>

const payConfig = ref<PaymentTypeResult>({
  alipayConfigStatus: 1,
  wxConfigStatus: 1
})

const isWeChatEnv = ref(false)
const activePay = ref<number>(props.payTypeId || PayMode.WX_H5)

/**
 * @description 选中icon展示
 */
const isSelectIcon = (mode: PayMode) => {
  return activePay.value === mode ? PaySelected : PayUnselected
}

const getPayConfigData = async () => {
  const { data } = await getIsSettingPay({
    usedId: appId,
    settleMode: isXcx() ? PayMode.WX_MINI : PayMode.WX_H5
  })

  const config = data
  if (!config.wxConfigStatus) {
    activePay.value = -1
  }
  payConfig.value = config
  if (config.wxConfigStatus && isWeChat()) {
    // 如果配置了微信支付才向外触发去获取信息
    emits('updateConfig')
  }
}

getPayConfigData()

/**
 * @description 支付类型切换
 */
const changePayType = (type: PayMode) => {
  if (activePay.value === type) return
  activePay.value = type
  emits('change', type)
}

onMounted(() => {
  isWeChatEnv.value = isWeChat()
  if (isWeChat() && !isXcx()) {
    activePay.value = PayMode.WX_JSAPI
  }
  if (isXcx()) {
    activePay.value = PayMode.WX_MINI
  }
  if (os?.isAlipay) {
    activePay.value = PayMode.ALI_MOBILE
  }
})
</script>

<style scoped lang="scss">
.buy-mode {
  &__pay {
    &--item {
      @apply flex justify-between items-center cursor-pointer;
      height: 96px;

      p {
        @apply flex items-center text-[#111];
        height: 100%;
        font-size: 28px;
        font-weight: 400;

        img {
          width: 56px;
          height: 56px;
        }
        .pay-icon {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
